<template>
  <div class="w-full h-full grid grid-cols-[250px_1fr]">
    <div class="bg-Center">
      <Search />
      <div class="w-full cursor-pointer flex flex-col gap-2 items-center px-1">
        <!-- 新的朋友 -->
        <div
          class="w-full flex flex-row items-center justify-between p-3 hover:bg-CenterHover"
          @click="currentStatus = RightContentStatus.notifyRequest"
        >
          <span class="text-sm font-medium">新的朋友</span>
          <el-icon>
            <ArrowRight />
          </el-icon>
        </div>
        <!-- 朋友列表 -->
        <n-tabs animated type="segment">
          <n-tab-pane name="chap1" tab="好友">
            <FriendList @selectFriend="SelectFriend" />
          </n-tab-pane>
          <n-tab-pane name="chap2" tab="群聊">
            <GroupList @selectGroup="SelectGroup" />
          </n-tab-pane>
        </n-tabs>
      </div>
    </div>
    <div :style="{ background: 'var(--bg-right)' }">
      <component :is="RenderPage"></component>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, h, ref } from "vue";
import { RightContentStatus } from "@/types/friend";
import { NTabPane, NTabs } from "naive-ui";
import { ArrowRight } from "@element-plus/icons-vue";
import Search from "@/components/Search/index.vue";
import Empty from "@/components/Empty/index.vue";
import FriendList from "./components/FriendList.vue";
import GroupList from "./components/GroupList.vue";
import FriendDetail from "./views/FriendDetail.vue";
import GroupDetail from "./views/GroupDetail.vue";
import RequestFriend from "./views/RequestFriend.vue";

let currentStatus = ref(RightContentStatus.empty);
let selectId = ref<number | null>(null);

const RenderPage = computed(() => {
  switch (currentStatus.value) {
    case RightContentStatus.friendDetail:
      return h(FriendDetail, { friendId: selectId.value || 0 });
    case RightContentStatus.groupDetail:
      return h(GroupDetail, { groupId: selectId.value || 0 });
    case RightContentStatus.notifyRequest:
      return h(RequestFriend, { showTab: true });
    default:
      return h(Empty, { showTab: true });
  }
});

function SelectFriend(friendId: number, status: RightContentStatus) {
  selectId.value = friendId;
  currentStatus.value = status;
}

function SelectGroup(groupId: number, type: RightContentStatus) {
  selectId.value = groupId;
  currentStatus.value = type;
}
</script>

<style lang="scss" scoped></style>
